<template>
  <div class="index">
    <div class="shopping_cart">
      <div class="shopping_content">
        
        <div class="card">
          <div class="title">打款人</div>
          <div class="cell">
            <div class="cell_label">打款人姓名</div>
            <div class="cell_value">
              <input
                type="text"
                v-model="orderObj.payerName"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="cell">
            <div class="cell_label">打款人日期</div>
            <div class="cell_value" @click="show = true">
              {{ orderObj.offlinePayTime || '请选择' }}
            </div>
          </div>
          <div class="remark">
            <p>公司打款，请填写详细公司名称</p>
            <p>打款日期请填写打款截图中的日期</p>
            <p>私人打款，无法开票，请知悉</p>
            <p>如单地址采购金额不足3000元，运费需到付</p>
          </div>
        </div>
        <div class="card">
          <div class="title">打款截图</div>
          <div class="upload">
            <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              multiple
              :maxCount="3"
              :previewFullImage="true"
            ></u-upload>
          </div>
        </div>
      </div>
      <div class="shopping_bottom">
        <div class="btn">
          <u-button type="primary" color="#FC6420" text="提 交" @click="submitOrder"></u-button>
        </div>
      </div>
    </div>
    <u-datetime-picker
      ref="datetimePicker"
      :show="show"
      v-model="value1"
      mode="datetime"
      :formatter="formatter"
      :closeOnClickOverlay="true"
      @confirm="confirmDate"
      @cancel="show = false"
      @close="show = false"
    ></u-datetime-picker>
  </div>
</template>

<script>
import auth from '../../api/auth.js'
import { normalTime } from '../../utils/index.js'
export default {
  data() {
    return {
      show: false,
      value1: Number(new Date()),
      showSkuModal: false,
      // 订单信息
      productOrderObj: {},
      fileList1: [],
      // 创建订单
      orderObj: {
        payerName: '', //买家备注
        offlinePayTime: '', //买家备注
        orderSn: '', //买家备注
        payPic: '', //买家备注
      },
      totalMoney: 0,
      addressObj: {},
    }
  },
  onReady() {
    // 微信小程序需要用此写法
    this.$refs.datetimePicker.setFormatter(this.formatter)
  },
  onLoad(option) {
    this.orderObj.orderSn = option.orderSn
  },
  watch: {},
  methods: {

    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    confirmDate(obj) {
      this.show = false
      this.orderObj.offlinePayTime = normalTime(obj.value, '-')
      console.log(this.orderObj.offlinePayTime)
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
      let picList = []
        this.fileList1.map(_=>{
          picList.push(_.url)
        })
        this.orderObj.payPic = picList.join(',')
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中',
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: 'success',
            message: '',
            url: result,
          })
        )
        fileListLen++
        console.log(result)
        let picList = []
        this.fileList1.map(_=>{
          picList.push(_.url)
        })
        this.orderObj.payPic = picList.join(',')
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'https://houlangguzi.com/mall/common/file/uploadFile',
          filePath: url,
          name: 'file',
          formData: {
            user: 'test',
          },
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data).resData.url)
            }, 1000)
          },
        })
      })
    },
    
    // 提交订单
    async submitOrder() {
      if(+this.orderObj.payerName === 0) {
        uni.$u.toast('请输入打款人姓名')
        return
      }
      if(!this.orderObj.offlinePayTime) {
        uni.$u.toast('请选择打款日期')
        return
      }
      if(!this.orderObj.payPic) {
        uni.$u.toast('请上传打款凭证')
        return
      }
      let params = {...this.orderObj}
      try {
        let res = await auth.submitPayVoucher(params)
        uni.$u.toast('上传成功！')
        let pages = getCurrentPages()
        let current = pages[pages.length - 1]
        const eventChannel = current.getOpenerEventChannel()
        eventChannel.emit('someEvent', {
          res
        })
        uni.navigateBack({delta: 1})
      }catch(err){}
    }
  },
}
</script>

<style lang="scss">
.index {
  height: 100%;
  background: #f5f7f9;
  .shopping_cart {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .shopping_content {
      flex: 1;
      overflow: auto;
      .tips {
        background: #ffff92;
        color: #e45656;
        padding: 24rpx 32rpx;
        margin-bottom: 20rpx;
      }
      .card {
        background: #fff;
        padding: 24rpx 32rpx;
        margin-bottom: 20rpx;
        border-radius: 16rpx;
        .title {
          font-size: 36rpx;
          line-height: 64rpx;
          font-weight: 500;
          display: flex;
          align-items: center;
          span {
            margin-right: 16rpx;
          }
          .isDefalut {
            font-weight: normal;
            line-height: 36rpx;
            display: inline-block;
            font-size: 20rpx;
            color: #FC6420;
            padding: 0 16rpx;
            background: #333333;
            border-radius: 8rpx;
          }
        }
        .address_cont {
          width: 100%;
          height: 152rpx;
          display: flex;
          align-items: center;
          background: #f5f7f9;
          padding: 36rpx 20rpx;
          box-sizing: border-box;
          border-radius: 8rpx;
          .cell-left {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .name {
              color: #222;
              font-size: 28rpx;
            }
            .desc {
              color: #999;
              font-size: 20rpx;
            }
          }
          .content {
            flex: 1;
            margin: 0 16rpx;
            .title {
              font-size: 30rpx;
              font-weight: 500;
              line-height: 50rpx;
              span:first-child {
                margin-right: 16rpx;
              }
            }
            .adr {
              font-size: 24rpx;
              color: rgba(0, 0, 0, 0.6);
            }
          }
          .icon {
            width: 40rpx;
            height: 40rpx;
          }
        }
        .cell {
          display: flex;
          height: 96rpx;
          line-height: 96rpx;
          .cell_label {
            width: 240rpx;
            font-size: 26rpx;
          }
          .cell_value {
            color: #757575;
            font-size: 26rpx;
            flex: 1;
            input {
              display: inline-block;
              width: 100%;
              height: 100%;
              line-height: 1;
            }
          }
          .right {
            display: flex;
            justify-content: flex-end;
          }
          .text {
            color: #333;
            text-align: right;
          }
        }
        .remark {
          padding: 20rpx;
          margin-top: 20rpx;
          background: #f8fafb;
          border: 2px solid #e8e9ea;
          border-radius: 8rpx;
          p {
            color: #8c9398;
            font-size: 20rpx;
            line-height: 36rpx;
          }
        }
      }
      .swich {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          span {
            font-size: 20rpx;
            color: #fa5d0a;
            font-weight: normal;
            margin-left: 16rpx;
          }
        }
      }
    }
    .shopping_bottom {
      height: 104rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;
      padding-bottom: 40rpx;
      background: #fff;
      border-top: 1px solid #e8e8e8;
      .btn {
        width: 100%;
        height: 72rpx;
      }
    }
  }
}
</style>
